<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试vue指令</title>
		<script src="./js/vue.js">
			
		</script>
		<style>
		[v-clock]{
			display: none;
		}
		</style>
	</head>
	<body>
		<div id="app" v-cloak>
			<input type="number" v-model="person.salary" />
			<p>{{person.salary}}</p>
			<!--v-if和v-show的区别?都可以判断,后者即使不满足条件也会被网页加载,只是设置成不被显示-->
			<p v-if="person.salary>8000">大将</p>
			<p v-else-if="person.salary>=6000">中将</p>
			<p v-else-if="person.salary>=4000">少将</p>
			<p v-else>啥也不是</p>
			<!-- <p v-show="person.salary>8000">大将</p> -->
			<h2>{{address}}</h2>
			<h2>{{address}}</h2>
			<h2>{{address}}</h2>
			<!--v-model双向绑定-->
			<input type="text" v-model="address" />
			<p v-for="h in hobby">{{h}}</p>
			<p v-for="i in hobby">{{i}}</p>
			<p v-for="(i,o) in hobby">{{i}},{{o}}</p>
			<p v-for="(o,i) in hobby">{{o}},{{i}}</p>
			<p v-for="o,i in hobby">{{o}},{{i}}</p>
			<button v-on:dblclick="show()">点我2</button>
			<button @click="show()">点我3</button>
			<button @dblclick="show()">点我3</button>
			<button v-on:click="show()">点我</button>
			<!-- <a href="{{url}}">错误示范</a><!-- 错的,把整个url当字符串解析了 --> -->
			<a href="http://www.baidu.com" target="_blank">{{urlname}}</a>
			<a v-bind:href="url" target="_blank">{{urlname}}</a>
			<a :href="url">链接3</a>
		</div>
		<script>
			new Vue({
				el:"#app",
				data:{
					address:"天安门广场",
					person:{
						name:"李云龙",
						salary:9000,
						gender:"男"
					},
					hobby:["打仗","骂娘","学习?"],
					url:"http://www.baidu.com",
					urlname:"baidu"
					
				},
				methods:{
					show:function(){
						console.log("好家伙!")
					}
				}
			})
		</script>
	</body>
</html>
